<template>
    <div class="login">
        <el-card shadow="hover" class="card">
            <h1 class="center">FunCode</h1>
            <div class="form">
                <el-form ref="form" :model="form" :rules="loginRules">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="flex">
                            <div class="flex-input">
                                <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
                            </div>
                            <div v-loading="codeLoading">
                                <el-image :src="imageUrl" style="width: 100px; height: 40px"></el-image>
                            </div>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
            <div class="login-btn">
                <el-button type="primary" @click="login" :loading="loginLoading">登 录</el-button>
            </div>
            <el-divider>其他登录方式</el-divider>
            <div class="other-login">
                <el-button icon="el-icon-delete" round size="medium"></el-button>
                <el-button icon="el-icon-delete" round size="medium"></el-button>
                <el-button icon="el-icon-delete" round size="medium"></el-button>
            </div>
        </el-card>
    </div>
</template>
  
<script>
import { reqCode } from '@/api/user'
export default {
    name: "login",
    data() {
        return {
            form: {
                username: null,
                password: null,
                code: null,
                uuid: null,
            },
            imageUrl: "getCode",
            loginRules: {
                username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            codeLoading: false,
            loginLoading: false
        }
    },
    mounted() {
        this.getCode()
    },
    methods: {
        getCode() {
            this.codeLoading = true
            reqCode({ checkCodeType: 'code:' }).then((res) => {
                this.codeLoading = false
                this.form.uuid = res.data.uuid
                this.imageUrl = res.data.image
            }).catch((error) => {
                console.log(error)
            })
        },
        login() {
            this.$refs["form"].validate(async valid => {
                if (valid) {
                    this.loginLoading = true
                    let requestForm = {
                        client_id: 'funcode',
                        client_secret: 'funcode',
                        grant_type: 'password',
                        username: JSON.stringify({
                            username: this.form.username,
                            password: this.form.password
                        }),
                    }
                    await this.$store.dispatch("login", requestForm).then((res) => {
                        this.loginLoading = false
                        this.$message.success("登录成功")
                        setTimeout(() => {
                            this.$router.push("/index")
                        }, 200);

                    }).catch((error) => {
                        this.loginLoading = false
                        this.$message.success(error.error_description)
                    })
                }
            });
        }
    },
}
</script>
  
<style scoped>
.login {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.card {
    width: 400px;
    height: 500px;
}

.center {
    text-align: center;
    margin-bottom: 20px;
}

.form {
    width: 300px;
    margin: 0 auto;
}

.flex {
    display: flex;
    justify-content: space-between;
    height: 40px;
}

.flex-input {
    width: calc(100% - 105px);
    height: 40px;
}

.login-btn {
    margin: 40px 0;
    width: 100%;
    text-align: center;
}

.login-btn button {
    width: 300px;
}

.other-login {
    text-align: center;
}
</style>